<div ng-controller="CreerEvenementController" style="width: 70%; margin: 0px auto 0px auto; margin-top: 30px;">

    <form name="formCreerEvenement" role="form">

        <div class="container-fluid panel panel-default">
            <div class="panel-heading">Jeu</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            Type de jeu 
                            <select ng-model="typeJeu" class="form-control" 
                                    style="width:300px" ng-options="typeJeu.libelle for typeJeu in typesDeJeu"name="typeJeuName" required>
                                <option value="">-- Choix du Type --</option>
                            </select>
                        </div>

                         <alert type="danger" ng-show="errorExists  && formCreerEvenement.typeJeuName.$error.required">Le type de jeu est obligatoire.</alert>

                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            Nom du jeu 
                            <input type="text" class="form-control" ng-model="nomJeu" style="width:300px"
                            name="nomJeuName" required>
                        </div>

                        <alert type="danger" ng-show="errorExists  && formCreerEvenement.nomJeuName.$error.required">Le nom est obligatoire.</alert>

                    </div>
                </div> 
            </div>
        </div>

        <div class="container-fluid panel panel-default">
            <div class="panel-heading">Evénement</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            Adresse de l'événement
                            <input type="text" class="form-control" ng-model="adresseEvenement" style="width:300px" name="adresseName" required>
                        </div>

                        <alert type="danger" ng-show="errorExists  && formCreerEvenement.adresseName.$error.required">L'adresse est obligatoire.</alert>

                    </div>
 
                    <div class="col-md-4">
                        <div class="form-group">
                            Code postal
                            <input type="number" class="form-control" ng-model="codePostalEvenement" style="width:300px" ng-minlength="5" ng-maxlength="5" name="codePostalName" required>
                        </div>

                        <alert type="danger" ng-show="errorExists && formCreerEvenement.codePostalName.$error.required">Le code postal est obligatoire.</alert>

                        <alert type="danger"
                            ng-show="formCreerEvenement.codePostalName.$error.minlength || formCreerEvenement.codePostalName.$error.maxlength">
                            le code postal est incorrect.
                        </alert>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            Ville
                            <input type="text" class="form-control" ng-model="villeEvenement" style="width:300px" name="villeName" required>
                        </div>

                        <alert type="danger" ng-show="errorExists && formCreerEvenement.villeName.$error.required">La ville est obligatoire.</alert>

                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <p style="margin-bottom:0px;">Date de l'événement</p>
                            <p class="input-group" style="display:inline-block; float:left;">
                                <input type="text" class="form-control" datepicker-popup="dd/MM/yyyy" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)"  close-text="Fermer" name="dateName" required/>
                                <div class="input-group-btn" style="float:left;">
                                    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i>
                                    </button>
                                </div>
                            </p>
                        
                            <alert  style="float:left;" type="danger" ng-show="errorExists && formCreerEvenement.dateName.$error.required">La date est obligatoire.</alert>
                        </div>

                    </div>
                    <div class="col-md-4"> 
                        <div class="form-group" style="clear:both;">
                            Nombre de tous les participants (en vous comptant)
                            <input type="number" class="form-control" ng-model="nbParticipants" style="width:300px" ng-min="1" ng-max="1000" name="nbPartName" required>
                        </div>

                        <alert type="danger" ng-show="errorExists && formCreerEvenement.nbPartName.$error.required">Le nombre de participants est obligatoire.</alert>
                        
                         <alert type="danger"
                            ng-show="formCreerEvenement.nbPartName.$error.min || formCreerEvenement.nbPartName.$error.max">
                            Le nombre de participants est incorrect.
                        </alert>
                    </div>
                    <div class="col-md-4"> 
                        <div class="form-group">
                            Support
                            <select ng-model="support" class="form-control" style="width:300px" ng-options="support.libelle for support in supports" name="supportName" required>
                                <option value="">-- Choix du support --</option>
                            </select>
                        </div>

                         <alert type="danger" ng-show="errorExists && formCreerEvenement.supportName.$error.required">Le support est obligatoire.</alert>
                   
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        Heure :
                        <timepicker ng-model="mytime" ng-change="changed()" show-meridian="false"></timepicker>
                    </div>
                    <div class="col-md-8">
                        <div class="form-group">
                            Détail
                            <textarea ng-model="detailsCreerEvenement" style="width:100%; height:121px" placeholder="Saisissez ici toute information complémentaire, exemple : merci de ramener une manette supplémentaire etc..."></textarea>
                        </div>
                    </div>
                </div>
 
                <div>
                    <button type="submit" ng-click="creerEvenementAction(typeJeu.id,
                    nomJeu, adresseEvenement, codePostalEvenement, villeEvenement, dt, nbParticipants,
                    support.id, detailsCreerEvenement)" class="btn btn-primary">Valider</button>
                    <a href="#/listeEvenements" class="btn btn-warning">Retour</a>
                </div>
            </div>
        </div>
    </form>
</div>